import React from 'react'
import {
  Text,
  View
} from 'react-native'

import PropTypes from 'prop-types'

import StyleSheet from '../../utils/rzStyleSheet'

import BaseComponent from '../../components/common/baseComponent'

import RzImage from '../../components/common/rzImage'

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    // justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
    height: 50
  }
})

class Product extends BaseComponent {
  constructor (props) {
    super(props)
    this.displayName = 'Product'
  }

  render () {
    const {
      product
    } = this.props
    return (
      <View style={styles.container}>
        <RzImage
          source={{ uri: product.mainimgUrl }}
          style={[
            styles.img,
            {
              width: 43,
              height: 43
            }
          ]}
        />
        <Text>{product.productName}
        </Text>
      </View>
    )
  }
}

Product.propTypes = {
  product: PropTypes.object.isRequired
}

Product.defaultProps = {
}

export default Product
